<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./首页.css">
    <link rel="stylesheet" href="./swiper.min.css">

</head>

<body>

    <div id="app">
        <header>
            <h1> 智慧商城 </h1>
        </header>
        <main>
            <div class="search" @click="location">
                <input type="text" placeholder="搜索你要找的商品">
            </div>
            <div class="center">
                <div class="banner">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!-- <div class="swiper-slide" ><img src="./10004.jpg" alt=""></div>
                        <div class="swiper-slide" ><img src="./10005.jpg" alt=""></div>
                        <div class="swiper-slide" ><img src="./10006.jpg" alt=""></div> -->
                            <div class="swiper-slide" v-for="(item,index) in bannerList" :key="item.id">
                                <img :src="item.imgUrl" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <span>智慧商城2.0全新上线，更多新品等你来选~</span>
            </div>
            <div class="nav">
                <a href="#">
                    <img src="./58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
                    <p>新品首发</p>
                </a>
                <a href="#">
                    <img src="./49c64dbbf449e9e8abfca314f92814bd.png" alt="">
                    <p>居家生活</p>
                </a>
                <a href="#">
                    <img src="./8573fbc5e87e8a88827e905fca284604.png" alt="">
                    <p>服饰鞋包</p>
                </a>
                <a href="#">
                    <img src="./f01c5fc360f55c6053beec34913bc699.png" alt="">
                    <p>美食酒水</p>
                </a>
                <a href="#">
                    <img src="./b106e9bd9e0c8c779e7d77a84e92ed93.png" alt="">
                    <p>个护清洁</p>
                </a>
                <a href="#">
                    <img src="./fd3a573889671b924d89859f521c30c9.png" alt="">
                    <p>母婴亲子</p>
                </a>
                <a href="#">
                    <img src="./8f979924a4fd3b5f406b62a6b405ea32.png" alt="">
                    <p>运动旅行</p>
                </a>
                <a href="#">
                    <img src="./f7657720f79ea9f769c40608f369130e.png" alt="">
                    <p>数码家电</p>
                </a>
                <a href="#">
                    <img src="./36f09e32efc53e1e695210ca92c54ed8.png" alt="">
                    <p>宠物生活</p>
                </a>
                <a href="#">
                    <img src="./0cccdb31952fbf3bc0026efbe260e40e.png" alt="">
                    <p>每日抄底</p>
                </a>

            </div>
            <div class="imageSingle">
            </div>
            <div class="richText">
                <!-- <p>—— 猜你喜欢 ——</p> -->
                <span>—— 猜你喜欢 ——</span>
            </div>
            <div class="goods">
                <div class="goods-item"></div>
            </div>
        </main>
        <footer>
            <div class="item">
                <span><img src="./10001.png" alt=""></span>
                <p class="active"> 首页 </p>
            </div>
            <div class="item">
                <span><img src="./10002.png" alt=""></span>
                <p> 分类 </p>
            </div>
            <div class="item">
                <span><img src="./10003.png" alt=""></span>
                <p> 购物车 </p>
            </div>
            <div class="item">
                <span><img src="./10007.png" alt=""></span>
                <p> 我的 </p>
            </div>
        </footer>
    </div>
    <script src="./swiper.min.js"></script>
    <script src="./axios.js"></script>
    <script src="./vue.js"></script>
    <script>

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true,
            autoplay: 1000
        })

        axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/'
        // const res = axios.get('/page/detail')
        // console.log(res)
        // res.then(data=>{
        //     console.log(data)
        // })

        const app = new Vue({
            el: '#app',
            data: {
                bannerList: []
            },
            async created() {
                const { data: res } = await axios({
                    method: 'get',
                    url: '/page/detail'
                })
                // console.log(res.data.pageData.items)
                const bannerList = res.data.pageData.items[1].data
                console.log(bannerList)
                // bannerList.map(item=>)
            },
            methods: {
                location() {
                    location.href = './搜索页面.html'
                },
                // 'particulars-tea'(){
                //     location.href='./详情页（茶叶）.html'
                // },
                // 'particulars-pants'(){
                //     location.href='./详情页（裤子）.html'
                // },
                // 'particulars-bread'(){
                //     location.href='./详情页（面包）.html'
                // }
            }
        })







    </script>
    <!-- @click="particulars-tea" -->
    <!-- @click="particulars-pants" -->
    <!-- @click="particulars-bread" -->
</body>

</html>